@import "./variables/index";

.wrapper {
  padding: 0 15px 10px;

  .tabs-wrapper {
    display: flex;

    .tab-item {
      padding: 7px 15px;
      color: #fff;
      cursor: pointer;

      &.active {
        background: #436785;
      }
    }
  }
}

$--theme-lists__wrapper__tabs-wrapper__tab-item--active: #436785, blue, red;
@each $theme in $--theme-lists {
  :global(.theme-#{$theme}) {
    $i: index($--theme-lists, $theme);
    @if (length($--theme-lists__wrapper__tabs-wrapper__tab-item--active) < $i) {
      $i: 1
    }

    .wrapper {
      .tabs-wrapper {
        .tab-item {
          &.active {
            background: nth($--theme-lists__wrapper__tabs-wrapper__tab-item--active, $i);;
          }
        }
      }
    }
  }
}
